<template>
    <div class='manage-market-activity-view'>
        <header-component title='查看市场活动' :showAdd='true' addText='申请市场活动' @addClick='addMarketActivityHandler'></header-component>
        <el-row>
            <el-form :inline='true' :model='formInline' class='find-by-term'>
                <el-form-item label="销售经理" label-width="80px">
                    <el-select v-model="formInline.sale_user_id" placeholder="请选择销售经理" @change='changeFilterHandler'>
                        <el-option v-for="item in salerList" :key="item.id" :label="item.realname" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="活动状态" label-width="100px">
                    <el-select v-model="formInline.state" placeholder="请选择活动状态" @change='changeFilterHandler'>
                        <el-option v-for="item in stateList" :key="item.id" :label="item.name" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="销售商" label-width="80px">
                    <el-select v-model="formInline.dealer_id" placeholder="请选择销售经理" @change='changeFilterHandler'>
                        <el-option v-for="item in dealerList" :key="item.id" :label="item.company" :value="item.id"></el-option>
                    </el-select>
                </el-form-item>
                 <el-form-item>
                    <el-button type="primary" @click="onClear">清除</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <data-list class='data-list light-header' @edit='editHandler' @delete='deleteHandler' @end='endHandler' :table-data='dataList' :header-data='dataHeader' :column-formatter='listColumnFormatter' :column-formatter-data='listColumnFormatterData' :comboModelList='comboDataList' :columnComboData='columnComboData' :comboIsSelect='true' ></data-list>
        <!--<el-row class='pager' type='flex' justify='end' align='middle'>
                <el-pagination @current-change="handleCurrentChange" :current-page="curPage" :page-size="pageSize" layout="prev, pager, next" :total="total">
                </el-pagination>
            </el-row>-->
    </div>
</template>



<script>
import Header from '../../components/Header'
import SubjectFilter from '../../components/SubjectFilter'
import BaseList from '../../components/BaseList'
import BackToTop from '../../components/BackToTop'
import api from '../../api/modules/config'
import {
    set_user_student_mrzx
} from '../../api/modules/student'
import {
    Loading
} from 'element-ui'
import {
    Dialog
} from '../dialogs'
import {
    ADD_MARKET_ACTIVITIES
} from '../dialogs/types'
 import {
        doTimeFormat
    } from '../../components/Util'
import {
    Config
} from '../../config/base'
import {
    mapState,
    mapActions
} from 'vuex'
export default {
    mixins: [Dialog],
    data() {
        return {
            formInline: {
                sale_user_id: null,
                state: null,
                dealer_id: null
            },
            loadingInstance: null,
            searchData: '',
            curPage: 1,
            pageSize: 20
        }
    },

    methods: {
        ...mapActions([
            'get_market_activities_list',
            'get_agency_selection_list',
            'get_saler_list',
            'delete_market_activities',
            'update_market_activities_state',
            'clear_market_activities'
        ]),
        deleteHandler(index, row) {
            var vm = this;
            this.$confirm('是否确认删除该市场活动申请？', '提示', {
                type: 'info'
            }).then(() => {
                this.delete_market_activities({
                    id: row.id, _fn: function () {
                        vm.showPop('删除成功！');
                    }
                })
            }).catch(() => { });
        },
        endHandler(index, row) {
            this.update_market_activities_state({ id: row.id, value: -1 });
        },
        addMarketActivityHandler() {
            this.handleSelModal(ADD_MARKET_ACTIVITIES)
        },
        changeFilterHandler() {
            this.getData();
        },
        getData() {
            this.clear_market_activities();
            var formData = {
                dealer_id: this.formInline.dealer_id,
                sale_user_id: this.formInline.sale_user_id,
                state: this.formInline.state,
            }

            this.get_market_activities_list(formData);
        },
        onSubmit() {
            this.getData();
        },
        onClear() {
            this.formInline.sale_user_id = null;
            this.formInline.state = null;
            this.formInline.dealer_id = null;
            this.getData();
        },
        handleCurrentChange(val) {
            this.getData();
        },
        editHandler(index, row) {
            this.handleSelModal(ADD_MARKET_ACTIVITIES, row.id);
        }
    },
    mounted() {
        this.get_agency_selection_list();
        this.get_saler_list();
        this.getData();
    },
    watch: {
        isLoading(val) {
            if (val) {
                this.loadingInstance = Loading.service({
                    text: '加载中，请稍后',
                    fullscreen: true
                });
                setTimeout(() => {
                    this.loadingInstance && this.loadingInstance.close();
                }, Config.base_timeout);
            } else {
                this.loadingInstance && this.loadingInstance.close();
                this.dirty = false;
            }
        }
    },
    computed: {
        ...mapState({
            isLoading: state => state.market_activities.showLoading,
            dataList: state => state.market_activities.market_activities_list,
            stateList: state => state.market_activities.state_list,
            typeList: state => state.market_activities.type_list,
            dealerList: state => state.agency.agency_selection_list,
            salerList:state => state.saler.saler_list,
            total: state => state.market_activities.total
        }),
        comboDataList() {
            var r = [];
            var v = []
            for (var i = 0; i < this.dataList.length; i++) {
                r.push(this.dataList[i].state);
            }
            return r;
        },
        columnComboData() {
            return [this.stateList];
        },
        dataHeader() {
            return [{
                label: '序号',
                width: 90,
                sort: true
            }, {
                prop: 'dealer_id',
                label: '申请经销商',
                width: 200
            }, {
                prop: 'sale_user_id',
                label: '销售经理',
                width: 120
            }, {
                prop: 'create_time',
                label: '申请时间',
                width: 130
            }, {
                prop: 'expect_start_time',
                label: '预期活动时间',
                minwidth:150
            }, {
                prop: 'start_time',
                label: '实际活动时间',
                minwidth:150
            }, {
                prop: 'type',
                label: '申请项目',
                width:120
            }, {
                prop: 'description',
                label: '资源描述',
                width:120
            }, {
                prop: 'expect_amount',
                label: '预计费用',
                width: 120
            }, {
                prop: 'amount',
                label: '实际费用',
                width: 120
            }, {
                prop: 'state',
                label: '状态',
                width:110
            }, {
                label: '审核',
                prop: 'state',
                useCombo: true,
                comboListIndex: 0,
                comboIsSelect: true,
                listLabel: 'name',
                listValue: 'id',
                actionName: 'update_market_activities_state',
                width: 300
            }, {
                label: '操作',
                width: 150,
                groupBtn: [{
                    text: '修改',
                    param: 'edit'
                // }, {
                //     text: '结束',
                //     param: 'end'
                // }, {
                //     text: '删除',
                //     param: 'delete'
                }
                ]
            }]
        },
        listColumnFormatter() {
            return [
                {
                    columnName: 'create_time',
                    doFormat: doTimeFormat
                },
                {
                    columnName: 'expect_start_time',
                    doFormat: doTimeFormat
                },
                {
                    columnName: 'start_time',
                    doFormat: doTimeFormat
                },
                {
                    columnName: 'dealer_id',
                    dataIndex: 0,
                    dataProp: 'id',
                    dataValue: 'company'
                },
                {
                    columnName: 'state',
                    dataIndex: 1,
                    dataProp: 'id',
                    dataValue: 'name'
                },
                {
                    columnName: 'type',
                    dataIndex: 2,
                    dataProp: 'id',
                    dataValue: 'name'
                },
                {
                    columnName:'sale_user_id',
                    dataIndex: 3,
                    dataProp: 'id',
                    dataValue: 'realname'
                }
            ]
        },
        listColumnFormatterData() {
            return [this.dealerList, this.stateList, this.typeList, this.salerList];
        },
        comboDataList() {
            var r = [];
            var v = []
            for (var i = 0; i < this.dataList.length; i++) {
                r.push(this.dataList[i].state);
            }
            return r;
        },
        columnComboData() {
            return [this.stateList];
        },
    },
    components: {
        'header-component': Header,
        'subject-filter': SubjectFilter,
        'data-list': BaseList,
        'back-to-top': BackToTop
    }
}
</script>
<style lang="scss">
.el-tooltip__popper {
    &.is-light {
        background: #FFFFFF;
        border: 1px solid #E7E8EA;
        box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.12), 0 0 6px 0 rgba(0, 0, 0, 0.04);
        .more-tip {
            max-width: 278px;
            line-height: 1.2;
            font-size: 14px;
            color: #2e3e47;

            &+.popper__arrow {
                border-top-color: #E7E8EA;
                &:after {
                    //border-top-color:#E7E8EA;
                }
            }
        }
    }
}

.manage-market-activity-view {
    .base-list-container {
        .base-list-row {
            .cell {
                .el-button {
                    margin-right: 2px;
                    &:last-child {
                        margin-left: 10px;
                    }
                }
            }
        }
    }
    .find-by-term {
        padding-top: 22px;
        text-align: left;
        margin-left: 20px;
        .el-input__inner {
            border-radius: 0;
            background: #FFFFFF;
            border: 1px solid #E5E5E5;
        }
        .el-form-item__label {
            font-size: 14px;
            color: #141111;
            letter-spacing: 0;
        }
        .el-select {
            width: 300px;

            &.select-user {
                width: 100%;
                .el-input__inner {
                    border-right: 0;
                }
            }
        }
        button {
            background: #FB843E;
            border: 1px solid #F06B1D;
            border-radius: 4px;
            width: 100px;
            height: 36px;
        }
    }
    .pager {
        margin: 30px 0;
        padding-right: 40px;

        .el-pagination {
            button {
                &.disabled {
                    background-color: #ebebec;
                    border-color: #b0b3c5;
                    color: #8b9fa9;
                }
            }
            .el-pager {
                li {
                    &.active {
                        background-color: #8b9fa9;
                    }
                }
            }
        }
    }

    .btn-add {
        color: #5fa137;
    }
    .data-container {
        background-color: #ffffff;
        margin: 0 20px 20px;
        .list {
            .data-header {
                height: 50px;
                .el-col {
                    line-height: 50px;
                }
            }
            .data-item {
                height: 40px;
                border-top: 1px solid #cecece;

                &.bg-gray {
                    background-color: #fbfbfb;
                }

                .el-col {
                    line-height: 40px;
                    .el-button {
                        a {
                            color: #5fa137;
                            font-size: 14px;
                        }
                    }
                    p {
                        margin: 0;
                        display: -webkit-box;
                        white-space: normal;
                        -webkit-box-orient: vertical;
                        overflow: hidden;
                        -webkit-line-clamp: 1;
                    }
                }
            }
            .pager {
                margin: 30px 0;
                padding-right: 40px;

                .el-pagination {
                    button {
                        &.disabled {
                            background-color: #ebebec;
                            border-color: #b0b3c5;
                            color: #8b9fa9;
                        }
                    }
                    .el-pager {
                        li {
                            &.active {
                                background-color: #8b9fa9;
                            }
                        }
                    }
                }
            }
        }
    }
    .back-to-top {
        top: 80%;
        right: 20px;
    }
}

//添加框
.add-student-view {
    .img {
        margin-top: 100px;
        img {
            width: 150px;
            height: 150px;
        }
    }
    .title {
        margin-top: 25px;
        h1 {
            font-size: 28px;
            color: #2e3e47;
            font-weight: 200;
            font-family: MicrosoftYaHei;
            margin: 0;
        }
    }
    .search-bar {
        margin-top: 40px;
        .el-input-group {
            width: 380px;
            .el-input__inner {
                height: 46px;
            }
            .el-input-group__append {
                background-color: #7ab854;

                .el-button {
                    height: 100%;
                    width: 80px;
                    color: #ffffff;
                    font-size: 16px;
                }
            }
            .el-input-group__prepend {
                background-color: #7ab854;

                .el-select {
                    height: 100%;
                    width: 110px;
                    color: #ffffff;
                    font-size: 16px;
                }

                i {
                    color: #ffffff;
                }
            }
        }
    }
    .result {
        margin: 15px 0 76px;
        .data-form {
            width: 550px;
            background-color: #ffffff;
            border: 1px solid #EBEBEC;
            border-radius: 6px;
            padding: 20px 0;
            .user-info {
                font-size: 14px;
                margin-bottom: 24px;
                border-bottom: 1px solid #EBEBEC;
                padding: 0 20px;
                span {
                    color: #7ab854;
                    margin-right: 15px;
                }
            }
            .user-data {
                font-size: 14px;
                margin-bottom: 15px;
                padding: 0 20px;

                .el-button {
                    width: 140px;
                    height: 36px;
                    background-color: #7ab854;
                    color: #ffffff;
                }

                &.desc {
                    width: 100%;
                    .el-input {
                        width: 330px;
                    }
                }
            }
        }
    }
}
</style>
